<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <script src="../elements/element.js"></script>
    <link rel="stylesheet" href="../elements/element.css">
</head>
<body>
<div id="app">
    <!--action:后台接口 on-preview:预览    on-remove ：删除  list-type：上传样式-->
    <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-success="uploadSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" with-credentials="true">
        <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>
</body>
<script src="../static/global.js"></script>
<script>
    var Main = {
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                uploadUrl:glodate.serverZuul+"api/upload",
                Img:[]
            };
        },
        methods: {
            //删除图片信息
            handleRemove(file, fileList) {
                console.log(file, fileList);
                const filePath = file.response
                // 从pics数组中，找到图片的索引值
                const i = this.Img.findIndex(x => x === filePath)
                // 调用数组中的splice方法，移除图片信息
                this.Img.splice(i, 1);
                console.log("删除后的"+this.Img)

            },
            //查看大图，暂无效
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.response;
                this.dialogVisible = true;
            },
            //上传成功
            uploadSuccess(response){
                //拿到服务器响应的图片
                this.Img.push(response)
                console.log("删除之前的:"+this.Img);

            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>